<template>
  <el-form :model="model"  :rules="rulesForm" ref="dataForm">
        <el-row>
            <el-col :span="11">
                <el-form-item label="用户昵称" label-width="130px" prop="nick_name" >
                    <el-input v-model="model.nick_name" style="width:250px" placeholder="请输入用户账号" autocomplete="off"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="归属部门" label-width="130px" prop="dept_name">
                    <el-input v-model="model.dept_name"  style="width:250px" :disabled="isUpdate"  @focus="SelectDem" placeholder="请选择归属部门" autocomplete="off"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="11">
                <el-form-item label="手机号码" label-width="130px" prop="phonenumber">
                    <el-input v-model="model.phonenumber"  style="width:250px" :disabled="isUpdate"  placeholder="请输入手机号码" autocomplete="off"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="邮箱" label-width="130px" prop="email">
                    <el-input v-model="model.email"  style="width:250px" :disabled="isUpdate"   placeholder="请输入邮箱" autocomplete="off"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="11">
                <el-form-item label="用户账号" label-width="130px" prop="user_name">
                    <el-input v-model="model.user_name"  style="width:250px" :disabled="isUpdate"  placeholder="请输入用户名称" autocomplete="off"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="用户密码" label-width="130px" prop="password">
                    <el-input v-model="model.password"  style="width:250px" :disabled="isUpdate"  show-password autocomplete="off"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="11">
                <el-form-item label="用户性别" label-width="130px" prop="status">
                    <el-select v-model="model.sex" style="width:250px"  placeholder="请选择"  clearable>
                        <el-option label="男" value="0"></el-option>
                        <el-option label="女" value="1"></el-option>
                        <el-option label="未知" value="2"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="状态" label-width="130px" prop="status">
                    <el-select v-model="model.status" style="width:250px" placeholder="请选择"  clearable>
                        <el-option label="正常" value="0"></el-option>
                        <el-option label="停用" value="1"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            
        </el-row>

        <el-row>
            <el-col :span="11">
                <el-form-item label="岗位" label-width="130px" prop="post_name">
                    <el-input v-model="model.post_name"  style="width:250px" :disabled="isUpdate"  @focus="SelectPost" placeholder="请选择岗位" autocomplete="off"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="角色" label-width="130px" prop="roles">
                    <el-select v-model="RoleArray" style="width:250px"  multiple placeholder="请选择">
                        <el-option
                        v-for="item in SelectArray"
                        :key="item.role_id"
                        :label="item.role_name"
                        :value="item.role_id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col>
                <el-form-item label="备注" label-width="130px" prop="remark">
                    <el-input type="textarea" style="width:643px" v-model="model.remark"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-dialog class="box-dialog" width="80%"  :visible.sync="dialogFormVisible" @close="closelog" :close-on-click-modal="false" append-to-body>
           <SelectDept v-if="DialoType==0" @SelectChange="SelectDeptChange"/>
           <SelectPost v-if="DialoType==1" @SelectChange="SelectPostChange"/>
        </el-dialog>
        <div style="text-align:right;">
            <el-button @click="closeDialog" style="margin-right:10px;">取 消</el-button>
            <el-button slot="reference" type="primary" @click="save">确 定</el-button>
        </div>
    </el-form>
</template>

<script>
import SelectDept from '../components/SelectDepartment.vue'
import SelectPost from '../components/SelectPost.vue'
export default {
components:{
    SelectDept,
    SelectPost
},
props:{
    model:{
        type:Object, //类型
        required:true, //必要性
    },
    isUpdate:{
        type:Boolean, //类型
        required:true, //必要性
    },
},
data(){
   return{
        dialogFormVisible:false,
        DialoType:0,
        SelectArray:[],
        RoleArray:[],
        rulesForm:{
            nick_name:[{ required : true, message:'请输入用户昵称', trigger:'blur'}],
            user_name:[{ required : true, message:'请输入用户账号', trigger:'blur'}],
        },
   }
},
methods:{
    //选择部门
    SelectDeptChange(e){
        this.model.dept_id=e.dept_id;
        this.model.dept_name=e.dept_name
        this.dialogFormVisible=false;
    },
    //选择岗位
    SelectPostChange(e){
        this.model.post_id=e.post_id;
        this.model.post_name=e.post_name
        this.dialogFormVisible=false;
    },
    SelectDem(){
        this.DialoType=0;
        this.dialogFormVisible=true;
    },
    SelectPost(){
        this.DialoType=1;
        this.dialogFormVisible=true;
    },
    SelectBind()
    {
        this.$http.request({
                type:'get',
                url:'/api/RoleManage',
            }).then(res=>{
                console.log(res.data);
                if(res.data.code==200){
                    this.SelectArray=res.data.data;
                    // let datas = res.data.data;
                    // this.optionTree= this.cvtTreeData(datas);
                }
            }).catch(err=>{
                this.ShowMsg('服务器异常','error');
                console.log(err)
            }).finally(()=>{
            })
    },
    save(){
        this.model.roles= this.RoleArray.join(',')
        this.$refs.dataForm.validate((valid) => {
            if (valid) {
                if(this.isUpdate)
                {
                    console.log(this.model);
                    // const loading =this.$loading();
                    // this.$http.putForm('/api/DepartmentManage',{model:this.model})
                    // .then(res =>{
                    //     console.log(res);
                    //      if(res.data.code == 200){
                    //          this.ShowMsg(res.data.msg,'success');
                    //          this.$emit('dataBind');
                    //          this.Closedialog();
                    //     }
                    // })
                    // .catch(err =>{
                    //     this.ShowMsg('服务器异常','error');
                    // }).finally(()=>{
                    //         setTimeout(()=>{
                    //             loading.close();
                    //         },500);
                    //  })
                    
                }
                else{
                    const loading =this.$loading();
                    this.$http.postForm('/api/UserManage',{model:this.model})
                    .then(res =>{
                        if(res.data.code == 200){
                            this.ShowMsg(res.data.msg,'success');
                                this.$emit('dataBind');
                                this.closeDialog();
                            }
                        })
                    .catch(err =>{
                        this.ShowMsg('服务器异常','error');
                    }).finally(()=>{
                            setTimeout(()=>{
                                loading.close();
                            },500);
                     })
                
                }
            } else {
                console.log('error submit!!');
                return false;
            }
            });
    },
    closelog(){
        this.dialogFormVisible=false;
    },
    closeDialog(){
        this.$emit('closeDialog')
    }
},
created(){
    this.SelectBind();
}
}
</script>

<style>

</style>